<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Demo</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <style>
            p { padding: 0; margin: 0; }
            .tar { text-align: right; }
            .user tr { cursor: pointer; }
            .text { padding: 10px; height: 500px; overflow: scroll; }
            .text p { text-align: left; }
            .text div { text-align: right; }
        </style>
    </head>
    <body>
        <table class="table table-bordered">
            <tr>
                <th scope="col">用户列表</th>
                <th scope="col">内容</th>
            </tr>
            <tr>
                <td scope="row">
                    <table class="table user" id="user"></table>
                </td>
                <td scope="row">
                    <div class="text" id="msg">
                    </div>     
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <form id="data">
                        <div class="form-group">
                            <textarea class="form-control" id="text" name="text" rows="3"></textarea>
                        </div>
                        <p class="tar"><button type="button" class="btn btn-primary" onclick="send()">发送</button></p>
                        <input type="hidden" name="id">
                    </form>
                </td>
            </tr>
        </table>
        <script>
            var ws,id;
            $(function(){
                ws=new WebSocket("ws://192.168.80.128:2346");
                ws.onopen = function() { };
                ws.onmessage = function(e) {
                    var json=JSON.parse(e.data);
                    console.log(json);
                    if(json.code==-1){
                        $('#myModal').modal({
                            "keyboard":false,
                            "backdrop":"static"
                        });
                        $('#myModal').modal("show");
                    }else if(json.code==2){
                        if(typeof id==='undefined') id=json.send_id;
                        if(json.data.length!=0){
                            $("#user").empty();
                            for(var i=0; i<json.data.length; i++){
                                if(id!=json.data[i]["id"]) $("#user").append("<tr data-id=\""+json.data[i]["id"]+"\"><td>"+json.data[i]["name"]+"</td></tr>")
                            }
                            $('#myModal').modal("hide");
                            $('#user').find("tr").on("click",function(){
                                $(this).parent().find("tr").removeClass("table-primary");
                                $(this).addClass("table-primary");
                                $("#data").find("input[name='id']").val($(this).data("id"));
                            });
                        }
                    }else if(json.code==1){
                        if(json.send_id==id){
                            $("#msg").append("<p>我</p>")
                            $("#msg").append("<p>"+json.msg+"</p>")
                        }else{
                            $("#msg").append("<div>"+json.send_name+"</div><div>"+json.msg+"</div>")
                        }
                    }
                    
                };
            });
            function send(){
                var id=Number($("#data").find("input[name='id']").val());
                var msg=$("#data").find("textarea[name='text']").val();
                if(id==0){
                    alert("请选择发送人");
                    return;
                }
                if(!msg){
                    alert("请输入发送内容");
                    return; 
                }
                $("#data").find("textarea[name='text']").val("")
                ws.send('{"model":"msg","id":"'+id+'","msg":"'+msg+'"}');
            }
            function setName(){
                var nickname = $("#nickname").val();
                if(!nickname){
                    alert('请输入昵称');
                    return;
                }
                ws.send('{"model":"setName","name":"'+nickname+'"}');
            }
        </script>
        <div class="modal" tabindex="-1" role="dialog" id="myModal">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">设置昵称</h5>
                </div>
                <div class="modal-body">
                    <p><input type="text" class="form-control" id="nickname" placeholder="输入昵称" value="Guo"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="setName()">确定</button>
                </div>
                </div>
            </div>
        </div>
    </body>
</html>